<!--
 * @Description: 聚丙烯纤维模板
 * @Autor: yjx
 * @Date: 2021-11-17 16:31:54
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-30 14:20:10
-->
<template>
    <div id="template10" class="template_table_parent">
        <table class="template_table" border="1" cellpadding="0" cellspacing="0" @click="example">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>检测编号：</td>
                <td class="bg5"></td>
            </tr>
            <tr>
                <td>委托单位</td>
                <td class="bg5" colspan="2"></td>
                <td>品 种</td>
                <td class="bg5"></td>
                <td>出厂编号</td>
                <td class="bg6"></td>
                <td>取样日期</td>
                <td class="bg3 select_date">
                    <el-date-picker
                        v-model="tableData.qysj"
                        format="HH:mm"
                        value-format="timestamp"
                        type="datetime">
                    </el-date-picker>
                </td>
            </tr>
            <tr>
                <td>检测单位</td>
                <td class="bg5" colspan="2"></td>
                <td>等 级</td>
                <td class="bg5"></td>
                <td>车牌号</td>
                <td class="bg6"></td>
                <td>试验日期</td>
                <td class="bg3 select_date">
                    <el-date-picker
                        v-model="tableData.syDate"
                        format="HH:mm"
                        value-format="timestamp"
                        type="datetime">
                    </el-date-picker>
                </td>
            </tr>
            <tr>
                <td>生产厂家</td>
                <td class="bg5" colspan="2"></td>
                <td>品 牌</td>
                <td class="bg5"></td>
                <td>环境温度</td>
                <td class="bg6"></td>
                <td>代表批量</td>
                <td class="bg5"></td>
            </tr>
            <tr>
                <td>送货单位</td>
                <td class="bg5" colspan="2"></td>
                <td>样品来源</td>
                <td class="bg5"></td>
                <td>环境湿度</td>
                <td class="bg6"></td>
                <td>检测依据</td>
                <td class="bg4"></td>
            </tr>
            <tr>
                <td>材质证明</td>
                <td class="bg5" colspan="8" attrName="kjczzm" setType="select">{{tableData.kjczzm && tableData.kjczzm.hgbz && tableData.kjczzm.hgbz.label || '待配置'}}</td>
            </tr>
            <tr>
                <td>含水量</td>
                <td>样品重（g）</td>
                <td class="bg3" colspan="2"></td>
                <td>烘干后重（g）</td>
                <td class="bg3" colspan="2"></td>
                <td>含水量（%）</td>
                <td class="bg1" attrName="hsl" setType="input">{{tableData.hsl && tableData.hsl.hgbz || '待配置'}}</td>
            </tr>
            <tr>
                <td rowspan="3">品种一致性</td>
                <td colspan="2">易燃</td>
                <td class="bg1" colspan="6" attrName="yr" setType="select">{{tableData.yr && tableData.yr.hgbz && tableData.yr.hgbz.label || '待配置'}}</td>
            </tr>
            <tr>
                <td colspan="2">可拉丝</td>
                <td class="bg1" colspan="6" attrName="kls" setType="select">{{tableData.kls && tableData.kls.hgbz && tableData.kls.hgbz.label || '待配置'}}</td>
            </tr>
            <tr>
                <td colspan="2">水中不沉底</td>
                <td class="bg1" colspan="6" attrName="szbcd" setType="select">{{tableData.szbcd && tableData.szbcd.hgbz && tableData.szbcd.hgbz.label || '待配置'}}</td>
            </tr>
            <tr>
                <td>分散性</td>
                <td colspan="2">水中易分散</td>
                <td class="bg1" colspan="6" attrName="szyfs" setType="select">{{tableData.szyfs && tableData.szyfs.hgbz && tableData.szyfs.hgbz.label || '待配置'}}</td>
            </tr>
            <tr>
                <td>溶解性</td>
                <td colspan="2">水中不溶解</td>
                <td class="bg1" colspan="6" attrName="szbrj" setType="select">{{tableData.szbrj && tableData.szbrj.hgbz && tableData.szbrj.hgbz.label || '待配置'}}</td>
            </tr>
            <tr>
                <td rowspan="2">备 注</td>
                <td rowspan="2" colspan="8"></td>
            </tr>
            <tr></tr>
            <tr>
                <td></td>
                <td>审核：</td>
                <td class="bg5" colspan="2"></td>
                <td></td>
                <td>试验：</td>
                <td class="bg5" colspan="2"></td>
                <td></td>
            </tr>
        </table>

        <SetStandardDialog :visible.sync="setStandardVisible" :config="setStandardConfig" @updated="setData"/>
    </div>
</template>
<script>
import SetStandardDialog from './SetStandardDialog'

const ARR = [
    { key: 'kjczzm', title: '材质证明', category: 7, type: 1, code: 'cell_17', options: [{value: 0, label: '齐全且一致'}, {value: 1, label: '不齐全或不一致'}]},
    { key: 'hsl', title: '含水量', category: 7, type: 2, code: 'cell_20' },
    { key: 'yr', title: '易燃', category: 1, type: 1, code: 'cell_21', options: [{ value: 0, label: '易燃' }, { value: 1, label: '不易燃' }]},
    { key: 'kls', title: '可拉丝', category: 1, type: 1, code: 'cell_22', options: [{ value: 0, label: '可拉丝' }, { value: 1, label: '不可拉丝' }]},
    { key: 'szbcd', title: '水中不沉底', category: 1, type: 1, code: 'cell_23', options: [{ value: 0, label: '浮入水面（合格）' }, { value: 1, label: '沉入水底（不合格）' }]},
    { key: 'szyfs', title: '水中易分散', category: 1, type: 1, code: 'cell_24', options: [{ value: 0, label: '水中均匀分散（合格）' }, { value: 1, label: '水中不易分散（不合格）' }]},
    { key: 'szbrj', title: '水中不溶解', category: 1, type: 1, code: 'cell_25', options: [{ value: 0, label: '水中不溶解' }, { value: 1, label: '水中易溶解' }]},
]

export default {
    components: {
        SetStandardDialog, // 设置标准
    },
    props: {
        templateData: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            setStandardConfig: {},
            setStandardVisible: false,
            tableData: {},
        }
    },
    created() {
        const obj = {};
        for(let i = 0; i < ARR.length; i++) {
            obj[ARR[i].key] = {}
        }
        this.tableData = obj
        if(this.templateData) {
            this.tableData = this.templateData
        }
    },
    watch: {
        templateData: {
            deep: true,
            handler: function() {
                if(this.templateData) {
                    this.tableData = this.templateData
                } else {
                    const obj = {};
                    for(let i = 0; i < ARR.length; i++) {
                        obj[ARR[i].key] = {}
                    }
                    this.tableData = obj
                }
            },
        },
    },
    methods: {
        // 格式化数据
        fData(data) {
            if(data && data['hgbz']) {
                let type = null;
                if(Array.isArray(data['hgbz'])) type = 'input'
                if(!Array.isArray(data['hgbz'])) type = 'select'
                if(typeof data['hgbz'] === 'string') type = 'popup'
                if(type === 'input') {
                    const arr = ['合格标准', '相邻波动', '异常标准1', '异常标准2'];
                    return JSON.stringify(Object.values(data).map((item, i)=>({code: i + 1, iteam: arr[i+1], min: item[0], max: item[1], format: i === 0 ? 1 : 2})))
                } else if(type === 'select') {
                    return JSON.stringify({id: data.hgbz.value, value: data.hgbz.label})
                } else if(type === 'popup'){
                    return data.hgbz
                } else {
                    return ''
                }
            } else {
                return ''
            }
            
        },
        example(e) {
            // 事件委托，根据属性判断是否可以点击
            const target = e.target
            const key = target.getAttribute('attrName')
            const type = target.getAttribute('setType')
            if (key && type) {
                this.setStandard(key, type)
            }
        },
        setStandard(key, type) {
            // 设置标准
            // key 要设置的属性名
            // type 类型 input输入框 select下拉框
            if (type === 'input' || type === 'select') {
                this.setStandardConfig = {
                    key,
                    type,
                    data: this.tableData[key],
                }
                if(type === 'select') {
                    this.setStandardConfig.options = ARR.filter(item=>item.key === key)[0].options
                }
                this.setStandardVisible = true
            }
        },
        setData(data) {
            // 自定义事件的回调，设置表格属性
            if (!data.type) return
            this.tableData[data.key] = data.data;
        },
        getData() {
            for(let i = 0; i < ARR.length; i++) {
                if(!this.tableData[ARR[i].key].hgbz) {
                    this.$message.info('请配置' + ARR[i].title);
                    return false;
                }
            }
            const data = {};
            for (let i = 0; i < ARR.length; i++) {
                data[ARR[i].code] = {
                    title: ARR[i].title,
                    category: ARR[i].category,
                    type: ARR[i].type,
                    condition: this.fData(this.tableData[ARR[i].key]),
                    options: ARR[i].options ? JSON.stringify(ARR[i].options.map(item=>({id: item.value, value: item.label}))) : '',
                    resultValue: ''
                }
            }
            // 暴露自身表格数据的方法，父组件通过$refs调用
            return { data, tableData: this.tableData }
        },
    },
}
</script>
<style lang="scss" scoped>
#template1 {
    width: 1200px;
}
$td_width: 100px;
$td_height: 36px;
.params_template {
    width: 100%;
    margin-top: 20px;
    .top {
        display: flex;
        margin-left: 20px;
        .params_type {
            flex: 1;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .item {
                width: 33%;
                margin-bottom: 16px;
                display: flex;
                .item_color {
                    width: 28px;
                    height: 22px;
                    margin-right: 10px;
                }
                .item_text {
                    font-weight: 400;
                }
            }
        }
        .btn {
            width: 350px;
        }
    }
    .template_content {
        width: 100%;
        height: 430px;
        overflow: auto;
    }
    .text {
        width: 100%;
        height: 500px;
        color: #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .template_table_parent {
        margin: 0 30px 20px 20px;
        table {
            border-collapse: collapse;
            border: 0 !important;
        }
        td {
            position: relative;
        }
        table,th,td{
            border: 1px solid black;
        }
        .el-date-table {
            table,th,td{
                border: 0;
            }
        }
        .bg1 { // 必检
            background: #ffff00;
            color: red;
            cursor: pointer;
        }
        .bg2 { // 选检
            background: #ffffcd;
            color: red;
            cursor: pointer;
        }
        .bg3 { // 必填
            background: #00b14b;
        }
        .bg4 { // 默认
            background: #8062a4;
        }
        .bg5 { // 系统带入
            background: #fdd5b2;
        }
        .bg6 { // 选填
            background: #90d246;
        }
        .text_color { // 业务数据及系统带入值默认颜色
            color: #777;
        }
        .red { // 配置项颜色
            color: red;
            cursor: pointer;
        }
        .template_table {
            .el-select__caret { // 下拉框的下拉箭头
                display: none;
            }
            .el-textarea__inner { // 文本域设置
                width: 100%;
                height: 100%;
                line-height: 36px;
                border: 0;
                outline: none;
                resize: none;
            }
            .el-input {
                width: 100%;
                text-align: center;
            }
            .el-input__inner {
                width: 100%;
                border: 0;
                border-radius: 0;
                background: transparent;
                color: #000;
                text-align: center;
            }
            .el-input__suffix {
                color: #000
            }
            input::-webkit-input-placeholder{
                color: #000;
            }
            .select_date {
                .el-input__inner {
                    width: 100%;
                    border: 0;
                    border-radius: 0;
                    background: transparent;
                    color: #000;
                    padding: 0 10px;
                    text-align: center;
                }
                .el-input__prefix {
                    display: none;
                }
            }
            tr:first-child, tr:last-child{
                td {
                    border: 0;
                }
            }
            td {
                width: $td_width;
                height: $td_height;
                text-align: center;
            }
        }
    }
    
}
</style>